<template>
  <div class="circle-progress">
    <div class="cp-circle" :style="circleStyle">
      <div class="cp-circleBg" :style="bgStyle"/>

      <div class="cp-half left">
        <span :style="leftCircleStyle"/>
      </div>

      <div class="cp-half right">
        <span :style="rightCircleStyle"/>
      </div>
    </div>

    <div v-if="description" class="cp-decoration" :style="{color: fill}">
      <span>{{progress}}%</span>
      <span>{{description}}</span>
    </div>
  </div>
</template>

<script>
  /**
   * transform: rotate实现圆环进度条
   */
  export default {
    name: 'circle-progress',

    props: {
      size: {
        default: 98
      },
      bg: {
        default: '#e1e1e1'
      },
      fill: {
        default: '#07bb58'
      },
      lineWidth: {
        default: 6
      },
      description: {},
      progress: {
        default: 0
      }
    },

    computed: {
      circleStyle(){
        return {
          width: this.size + 'px',
          height: this.size + 'px'
        }
      },

      leftCircleRotate(){
        const relativeRotate = this.progress > 50 && Math.floor((this.progress - 50) / 50 * 180) || 0;
        return relativeRotate + 135
      },

      rightCircleRotate(){
        let relativeRotate;
        if(!this.progress){
          relativeRotate = 0
        }else{
          relativeRotate = (this.progress <= 50 && Math.floor(this.progress / 50 * 180)) || 180;
        }
        return relativeRotate - 45
      },

      bgStyle(){
        return {
          borderColor: this.bg,
          borderWidth: this.lineWidth + 'px'
        }
      },

      circleCommonStyle(){
        return {
          borderWidth: this.lineWidth + 'px',
          borderColor: `${this.fill} transparent transparent ${this.fill}`
        }
      },

      leftCircleStyle(){
        return {
          ...this.circleCommonStyle,
          transform: `rotateZ(${this.leftCircleRotate}deg)`
        }
      },

      rightCircleStyle(){
        return {
          ...this.circleCommonStyle,
          transform: `rotateZ(${this.rightCircleRotate}deg)`,
          marginLeft: `-${this.size / 2}px`
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .circle-progress {
    position: relative;
    text-align: center;
  }

  .cp-circle{
    position: relative;
    margin: 0 auto;
    font-size: 0;
  }

  .cp-circleBg{
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-style: solid;
    border-radius: 50%;
  }

  .cp-half {
    display: inline-block;
    width: 50%;
    height: 100%;
    overflow: hidden;
    >span{
      content: '';
      display: inline-block;
      box-sizing: border-box;
      width: 200%;
      height: 100%;
      border-style: solid;
      border-radius: 50%;
    }
    &.left > span{
      transform: rotateZ(135deg);
    }
    &.right > span{
      transform: rotateZ(-45deg);
    }
  }

  .cp-decoration {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 30px;
    width: 100%;
    line-height: 1;
    > span {
      display: block;
      &:first-child {
        margin-bottom: 5px;
      }
      &:nth-child(2) {
        font-size: .8em;
      }
    }
  }

</style>
